<!-- 2025.6.11-算机2202张卓尔 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<title>熙康体检系统</title>
		<!-- 导入vue框架 -->
		<script src="js/v3.2.8/vue.global.prod.js"></script>
		<!-- 导入ElementPlus框架 -->
		<script src="js/element-plus.js"></script>
		<!-- 导入Elementplus Icon  -->
		<script src="js/element-icons.js"></script>
		<!-- 导入Elementplus Css样式 -->
		<link rel="stylesheet" href="css/element-plus.css">
		<!-- 引入主页面样式 -->
		<link rel="stylesheet" href="css/main.css">



		<style>
			.col-right {
				/* 设置圆角：：左上，右上，右下，左下  */
				border-radius: 0px 4px 4px 0px;
				height: 100px;
				/* 设置水平居中 */
				text-align: center;
				/* 通过设置行高使其垂直方向居中 */
				line-height: 100px;
				vertical-align: middle;
				/* 设置阴影 */
				box-shadow: 0 1px 1px #c8c9cc;
			}

			.col-left {
				/* 设置圆角：左上，右上，右下，左下 */
				border-radius: 4px 0px 0px 4px;
				border-width: 1px solid;
				height: 100px;
				/* 设置水平居中 */
				text-align: center;
				/* 通过设置行高使其垂直方向居中 */
				line-height: 100px;
				vertical-align: middle;
			}

			.col-mid {
				/* 设置圆角：：左上，右上，右下，左下  */
				border-radius: 0px 4px 4px 0px;
				height: 220px;
				/* 设置水平居中 */
				text-align: center;
				/* 通过设置行高使其垂直方向居中 */
				line-height: 100px;
				vertical-align: middle;
				/* 设置阴影 */
				box-shadow: 0 1px 1px #c8c9cc;
			}

			.col-bottom {
				/* 设置圆角：：左上，右上，右下，左下  */
				border-radius: 0px 4px 4px 0px;
				height: 300px;
				/* 设置水平居中 */
				text-align: center;
				/* 通过设置行高使其垂直方向居中 */
				line-height: 100px;
				vertical-align: middle;
				/* 设置阴影 */
				box-shadow: 0 1px 1px #c8c9cc;
			}
		</style>
	</head>
	<body>

		<div id="app">
			<el-tabs type="border-card">
				<!-- 首页 -->
				<el-tab-pane label="首页">
					<!-- 头部： layout布局 -->
					<el-row :gutter="20">
						<!-- 视图一： 当日新增体检用户 -->
						<el-col :span="4">
							<div class="grid-content ep-bg-purple">
								<!-- 内部布局：layout布局--基础布局 -->
								<el-row>
									<el-col :span="8" class="col-left"
										style="border-color: #478CE9;background-color: #478CE9;">
										<Avatar style="width: 2em; height: 2em;border-color: white;" color="white" />
									</el-col>
									<el-col :span="16" class="col-right">
										<div style="font-size: 60px; font-weight:bold; color: #606266">
											103
										</div>
									</el-col>
								</el-row>
							</div>
						</el-col>
						<!-- 视图二： 当日新增预约用户-->
						<el-col :span="4">
							<div class="grid-content ep-bg-purple">
								<!-- 内部布局：layout布局--基础布局 -->
								<el-row>
									<el-col :span="8" class="col-left"
										style="border-color: #55BA75;background-color: #55BA75;">
										<!-- <el-icon><CirclePlusFilled /></el-icon> -->
										<Promotion style="width: 2em; height: 2em;border-color: white;" color="white" />
									</el-col>
									<el-col :span="16" class="col-right">
										<div style="font-size: 60px; font-weight:bold; color: #606266">
											203
										</div>
									</el-col>
								</el-row>
							</div>
						</el-col>
						<!-- 视图三： 新增-->
						<el-col :span="4">
							<div class="grid-content ep-bg-purple">
								<el-row>
									<el-col :span="8" class="col-left"
										style="border-color: #F39D38;background-color: #F39D38;">
										<Grid style="width: 2em; height: 2em;border-color: white;" color="white" />
									</el-col>
									<el-col :span="16" class="col-right">
										<div style="font-size: 60px; font-weight:bold; color: #606266">
											303
										</div>
									</el-col>
								</el-row>
							</div>
						</el-col>
						<el-col :span="4">
							<div class="grid-content ep-bg-purple">
								<el-row>
									<el-col :span="8" class="col-left"
										style="border-color: #DD4E2A;background-color: #DD4E2A;">
										<Histogram style="width: 2em; height: 2em;border-color: white;" color="white" />
									</el-col>
									<el-col :span="16" class="col-right">
										<div style="font-size: 60px; font-weight:bold; color: #606266">
											403
										</div>
									</el-col>
								</el-row>
							</div>
						</el-col>
						<el-col :span="4">
							<div class="grid-content ep-bg-purple">
								<el-row>
									<el-col :span="8" class="col-left"
										style="border-color: #926BDD;background-color: #926BDD;">
										<Share style="width: 2em; height: 2em;border-color: white;" color="white" />
									</el-col>
									<el-col :span="16" class="col-right">
										<div style="font-size: 60px; font-weight:bold; color: #606266">
											503
										</div>
									</el-col>
								</el-row>
							</div>
						</el-col>
						<el-col :span="4">
							<div class="grid-content ep-bg-purple">
								<el-row>
									<el-col :span="8" class="col-left"
										style="border-color: #DD4E2A;background-color: #DD4E2A;">
										<Tools style="width: 2em; height: 2em;border-color: white;" color="white" />
									</el-col>
									<el-col :span="16" class="col-right">
										<div style="font-size: 60px; font-weight:bold; color: #606266">
											603
										</div>
									</el-col>
								</el-row>
							</div>
						</el-col>
					</el-row>

					<!-- 主体第一部分： 饼状图， 柱形图 -->
					<div>
						<el-row :gutter="20" style="margin-top: 20px;">
							<!-- 视图一： 当日新增体检用户 -->
							<el-col :span="8">
								<div class="col-mid" id="pie">
								</div>
							</el-col>
							<!-- 视图二： 当日新增预约用户-->
							<el-col :span="8">
								<div class="col-mid" id="bar">
								</div>
							</el-col>
							<!-- 视图三： 当日新增预约用户-->
							<el-col :span="8">
								<div class="col-mid" id="radar">
								</div>
							</el-col>
						</el-row>
					</div>
					<!-- 主体第二部分： 面积图 -->
					<div style="margin-top: 20px;" class="col-bottom" id="area">
					</div>
				</el-tab-pane>
				<el-tab-pane label="Config">Config</el-tab-pane>
				<el-tab-pane label="Role">Role</el-tab-pane>
				<el-tab-pane label="Task">Task</el-tab-pane>
			</el-tabs>
		</div>
	</body>

	<script>
		const App = {
			data() {
				return {

				}
			},
			methods: {}
		};
		const app = Vue.createApp(App);
		app.use(ElementPlus);
		app.component("Avatar", ElementPlusIconsVue.Avatar);
		app.component("Tools", ElementPlusIconsVue.Tools);
		app.component("Share", ElementPlusIconsVue.Share);
		app.component("Histogram", ElementPlusIconsVue.Histogram);
		app.component("Grid", ElementPlusIconsVue.Grid);
		app.component("Promotion", ElementPlusIconsVue.Promotion);
		app.mount("#app");
	</script>

	<!-- 导入EChartsjs -->
	<script src="js/echarts.min.js"></script>
	<!-- 导入echarts组件 -->
	<!-- 导入饼状图 -->
	<script src="js/echartsjs/pie.js"></script>
	<!-- 导入柱状图 -->
	<script src="js/echartsjs/bar.js"></script>
	<!-- 雷达图 -->
	<script src="js/echartsjs/radar.js"></script>
	<!-- 折线图 -->
	<script src="js/echartsjs/area-stack.js"></script>
</html>
